//1).增加一定数值的颜色饱和度：saturate()
//2).降低一定数值的颜色饱和度：desaturate()
//3).增加一定数值的颜色亮度：lighten()
//4).降低一定数值的颜色亮度：darken()
//5).降低颜色的透明度（或增加不透明度），令其更不透明：fadein()
//6).增加颜色的透明度（或降低不透明的），令其更透明：fadeout()
//7).给颜色（包括不透明的颜色）设定一定数值的透明度：fade()
//8).任意方向旋转颜色的色相角度（hue angle）:spin()

@import "_hairline";

@import "_flex";

.button-size(@padding-y, @padding-x, @font-size, @border-raduis) {
  padding: @padding-y @padding-x;
  font-size: @font-size;
  border-radius: @border-raduis;
}

.button-style(
  @background,
  @border,
  @color,
  @hover-background: lighten(@background, 7.5%),
  @hover-border: lighten(@border, 10%),
  @hover-color: @color
) {
  color: @color;
  background: @background;
  border-color: @border;
  &:hover {
    color: @hover-color;
    background: @hover-background;
    border-color: @hover-border;
  }
  &:focus,
  &.focus {
    color: @hover-color;
    background: @hover-background;
    border-color: @hover-border;
  }
  &:disabled,
  &.disabled {
    color: @color;
    background: @background;
    border-color: @border;
  }
}

.border-right-radius(@raduis) {
  border-top-right-radius: @raduis;
  border-bottom-right-radius: @raduis;
}

.border-left-radius(@raduis) {
  border-top-left-radius: @raduis;
  border-bottom-left-radius: @raduis;
}